import React from 'react'
import uuid from 'uuid'
import * as AlertUtil from '../../../public/js/alertUtil'
import * as FormUtil from '../../../public/js/formUtil'
import { initTable, buttonDelete, buttonEdit,checkRight } from '../../../public/js/public'

export default class SetPermission extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            toolbarId: uuid.v4(),
            tableId: uuid.v4()
        }
    }

    initTable() {
        let that = this, columns = [{
            title: '权限ID',
            data: 'id',
            with:100,
            render: function(data,type,row, meta) {
                let checked = row.hasRight == 1 ? true: false
                if(checked) {
                    return `<input type="checkbox" checked=${checked} value=${row.id} />${row.id}`
                }
                return `<input type="checkbox" value=${row.id} />${row.id}`
            }
        },{
            title: '权限名',
            data: 'name',
            with: 200
        }, {
            title: '权限标识',
            data: 'permission',
            with: 200
        }, {
            title: '修改时间',
            data: 'updateTime',
            with: 200,
            render: function(data,type,row, meta) {
                if(data) {
                    return new Date(data).format('yyyy-MM-dd hh:mm:ss')
                }
            }
        }, ]

        const tableConfig = {
            columns:columns,
            ajax: domainName + "/permissions/getAllWithRole?roleId=" + this.props.roleId,
            paging: false,
            aLengthMenu: [100,200,500],
            scrollY: 400,
            dom: "<'container-fluid'<'row'<'col-7'<'toolbar'>><'col-5'f>>" +
                  "<'row'<'col-12'tr>>" +
                  "<'row'<'col-5'><'col-7'p>>>"
        }
        initTable({
            toolbarId :this.state.toolbarId,
            tableId: this.state.tableId,
            buttons : []
        },tableConfig)
    }

    componentDidMount() {
        $('#' + this.props.modalId).on('shown.bs.modal',()=> {
            let url = domainName + "/permissions/getAllWithRole?roleId=" + this.props.roleId
            $('#' + this.state.tableId).DataTable().ajax.url( url ).load()
        })

        this.initTable()
    }

    save() {
        let table = $('#' + this.state.tableId), chekcboxs =  $("input:checked", table), ids = []
        for(let i = 0; i<chekcboxs.length; i++) {
            ids.push(chekcboxs[i].value)
        }

        let url = domainName + "/roles/" + this.props.roleId + "/permissions", data = {permissionIds: ids.join(',')}
        FormUtil.submit(url, data, (response) => {
            AlertUtil.alert('提示','授权成功',()=>{
                $('#' + this.props.modalId).modal('hide')
            })
        },()=>{
            AlertUtil.alert('提示','授权失败, 请联系管理员!')
        })
    }

    render() {
        return (
            <div>
                <div className="modal fade" id={this.props.modalId} role="dialog">
                    <div className="modal-dialog modal-lg">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h4 className="modal-title">设置权限</h4>
                                <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div className="modal-body">
                                <div className="row">
                                    <div className="col-md-12">
                                        <div className="table-responsive">
                                            <table id={this.state.tableId} className="table table-striped table-bordered display" style={{width:'100%'}}></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="modal-footer">
                            <div className="form-group text-right">
                                <button  className="btn btn-info btn-sm waves-effect waves-light m-r-5" onClick =  {this.save.bind(this)}>保存</button>
                                <button type="button" className="btn btn-dark btn-sm waves-effect waves-light" data-dismiss="modal">取消</button>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}